<template>
	<view class="pay" :class="isShowPopup? 'popup-show': ''">
		<!-- 头部 -->
		<view class="head">
			<view class="title tc" :style="{paddingTop:`${systemInfo.statusBarHeight}px `}">支付成功</view>
			<view class="text x-f">
				<view class="circle x-c">
					<image src="/static/image/success.png" mode="" />
				</view>
				<view class="name">支付成功！</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="card pa">
			<view class="detail">
				<view class="left dib">
					<view class="order">订单编号</view>
					<view class="order">下单时间</view>
					<view class="order">支付积分</view>
					<view class="order">备注</view>
				</view>
				<view class="right dib">
					<view class="order" v-if="order.pay_no">{{order.pay_no || '无' }}</view>
					<view class="order" v-if="order.order_no">{{order.order_no || '无' }}</view>
					<view class="order">{{order.submit_time || '无'}}</view>
					<view class="order">{{order.consume_points || '无'}}积分 + {{order.consume_amount || 0}}元</view>
					<view class="order">{{order.remark || '无'}}</view>
				</view>
			</view>
			<!-- 拼团 -->
			<view class="team" v-if="buttonType == 'group'">
				<view class="name x-c">仅剩{{surplus}}个名额</view>
				<view class="list pr">
					<view class="info" v-for="(item,index) in order.memberList">
						<image v-if="item.pic_url.length" :src="item.pic_url" mode=""></image>
						<view class="" v-show="item.is_main">
						<view class="label pa x-c" >拼主</view>
						</view>
						<view class="none">
							<image  v-if="!item.pic_url.length" src="/static/image/circle.png" mode=""></image>
						</view>	
					</view>	
				</view>
			</view>
			<!-- 按钮 -->
			<view class="sumbit x-c">
				<view class="friend x-c" @click="jumpDetail(order)" v-if="">查看订单列表</view>
			</view>
			<view class="gohome x-c" @click="jump">
				<view class="home x-c">返回首页</view>
			</view>
		</view>
		<!-- 提示现金未支付 -->
		<view class="finish_box pf" v-if="finish_status">
			<view class="cardf pa">
				<view class="name x-c">订阅消息</view>
				<view class="text x-c">是否订阅订单状态消息</view>
				<view class="btn x-c">
					<!-- <view class="cancel" @click="cancel">取消</view> -->
					<view class="finally" @click="finall">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import { mapState } from 'vuex';
	export default {
		data() {
			return {
				isShowPopup: true,
				finish_status: true,
				none_img: this.imgUrl + 'circle.png',
				info: [],   // 拼团成员
				surplus: 0, // 剩余
			}
		},
        computed: {
           ...mapState({
                systemInfo: state => state.init.systemInfo ,  // 设备信息
                order: state => state.order.pay,              // 订单信息
				buttonType: state => state.order.type,		  // 订单状态
           }) 
        },
		onLoad() {
			// 清理总积分
			this.$store.dispatch('cart/get_sum',0)
			// 清理优惠券使用状态
			this.$store.dispatch('order/get_isUseFit',false)
			// 清理优惠券信息
			this.$store.dispatch('order/get_credit',null)
		},
		onUnload() {
			// 清理订单
			this.$store.dispatch('cart/get_order',null)
			// 清理订单
			this.$store.dispatch('order/get_order',null)
			// 清理订单金额
			this.$store.dispatch('order/get_paymoney',null)
			// 清理购物车
			this.$store.dispatch('cart/get_cart_group',null)
			// 清理优惠券积分
			this.$store.dispatch('order/get_couponsPoint', 0);
			// 清理卡卷
			this.$store.dispatch('order/get_coupons',null)
			// 清理卡卷选择下标
			this.$store.dispatch('order/get_selectAct',-1)
		},
		mounted() {
			// 查询剩余参团人数
			if(this.order != null) {
				this.surplus = this.order.group_max_member - this.order.group_number
			}
			// 清理订单信息
			this.$store.dispatch('cart/get_order',null)
			this.$store.dispatch('order/get_order',null)
			// 将团ID清空 存放至VUEX中
			this.$store.dispatch('goods/get_groupKey', '');
		},
		methods: {
			// 订阅消息
			cancel() {
				this.finish_status = false;
				this.isShowPopup = false;
			},
			finall() {
				this.finish_status = false;
				this.isShowPopup = false;
				this.getWxSub();
			},
			// 微信订阅
			getWxSub() {
				wx.getSetting({
					withSubscriptions: true,//是否同时获取用户订阅消息的订阅状态，默认不获取
					success: (res)=> {
						console.log(res)
						if (res.subscriptionsSetting && res.subscriptionsSetting.itemSettings &&
							res.subscriptionsSetting.itemSettings[message] == "reject"){
							//打开设置去设置
							this.openConfirm('检测到您没打开推送权限，是否去设置打开？')
						}else {
							wx.requestSubscribeMessage({
								tmplIds: ['A4OxAYvjZ8Oun0MAbk49NyIk5qUCjM2AxcNa9W5SL7c'],
								success: (res)=> {
									console.log(res,'成功回调')
									if(res.A4OxAYvjZ8Oun0MAbk49NyIk5qUCjM2AxcNa9W5SL7c == 'accept') {
										this.$tools.toast('订阅消息成功')
									}
								},
								fail: (res)=> { console.info(res) },
							})
						}
					}
				})
			},
			// 跳转页面
            jump() {
				this.$Router.replace({
                    path: '/pages/home_index/home_index'
                })
            },
			// 跳转卡卷详情
			jumpDetail(item) {
				if(this.buttonType == 'group') {
					this.$Router.push({
						path: '/pages/user/myteam/index'
					})
				} else {
					this.$Router.push({
						path: '/pages/user/order/index'
					})
				}
			},
        }
	}
</script>
<style lang="scss" scoped>
	@import './index.scss';
	    .popup-show {
	        overflow: hidden;
	        position: fixed;
	        height: 100%;
	        width: 100%;
	    }
</style>
<style>
    page {
        background-color: #ffffff !important;
    }
</style>
